<template>
    <div>
        <el-main>
            <!-- 查询表单 -->
            <el-form :model="deptModle" :inline="true" size="small" label-width="120px">
                <el-form-item label="部门名称"> 
                    <el-input v-model="deptModle.deptName" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">查询</el-button>
                    <el-button type="success" @click="resetForm">清空</el-button>
                    <el-button type="warning" @click="handleCreate">新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据表格 -->
            <el-table :data="tableData" border stripe style="width: 100%;" row-key="id"
            :tree-props="{children: 'children',hasChildren:'hasChildren'}" default-expand-all>
                <el-table-column prop="deptName" label="部门名称"></el-table-column>
                <el-table-column prop="parentName" label="上级部门"></el-table-column>
                <el-table-column prop="phone" label="部门电话"></el-table-column>
                <el-table-column prop="address" label="部门地址"></el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增与修改对话框 -->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="saveDept" :rules="rules" ref="form" label-width="120px" size="small">
                    <el-form-item label="上级部门" prop="parentName">
                        <el-input v-model="saveDept.parentName" placeholder="请输入上级部门" 
                        :readonly="true" @click.native="selectDept">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input v-model="saveDept.deptName" placeholder="请输入部门名称"></el-input>
                    </el-form-item>
                    <el-form-item label="部门电话" prop="phone">
                        <el-input v-model="saveDept.phone" placeholder="请输入部门电话"></el-input>
                    </el-form-item>
                    <el-form-item label="部门地址" prop="address">
                        <el-input v-model="saveDept.address" placeholder="请输入部门地址"></el-input>
                    </el-form-item>
                    <el-form-item label="部门排序" prop="orderNum">
                        <el-input-number v-model="saveDept.orderNum" placeholder="部门序号"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 部门树对话框 -->
            <el-dialog title="选择上级部门" :visible.sync="dialogTreeVisible" width="30%">
                <el-tree :data="treeData" :props="defaultProps" :highlight-current="true"
                @node-click="handleNodeClick" empty-text="未获取部门数据" default-expand-all>
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeTree">取 消</el-button>
                    <el-button type="primary" @click="handleTreeConfirm">确 定</el-button>
                </div> 
            </el-dialog>
        </el-main>
    </div>
</template>

<script>
import deptApi from '@/api/dept'

export default{
    data(){
        return {
            deptModle:{},
            tableData:[],
            titleMap:{
                create:'新增部门',
                update:'修改部门'
            },
            dialogStatus:'',
            dialogFormVisible:false,
            saveDept:{},
            rules:{
                parentName:[
                    { required: true, message: '请输入上级部门', trigger: 'blur' }
                ],
                deptName:[
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ]
            },
            dialogTreeVisible:false,
            treeData:[],
            defaultProps:{
                children:'children',
                label:'deptName'
            }

        }
    },
    created(){
        this.search()
    },
    methods:{
        async search(){
            const res = await deptApi.search(this.deptModle);
            if(res.success){
                this.tableData = res.data;
            }
        },
        onsubmit(){this.search()},
        resetForm(){
            this.deptModle = {};
            this.tableData = [];
            this.search();
        },
        handleCreate(){
            this.dialogStatus = 'create';
            this.saveDept = {};
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs['form'].clearValidate()
            });
        },
        handleEdit(row){
            this.dialogStatus = 'update';
            this.saveDept = Object.assign({}, row);
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs['form'].clearValidate()
            });
        },
        async handleDelete(row){
            // 判断是否有子部门
            let result = await deptApi.hasChildren(row.id);
            if(result.message==="有"){
                this.$message({
                    type:'warning',
                    message:'该部门下有子部门，不能删除'
                })
            }else{
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    const res = await deptApi.delete(row.id);
                    if(res.success){
                        this.$message({
                            type:'success',
                            message:'删除成功'
                        });
                    }
                    this.search();
                }).catch((error) => {
                    console.log(error);
                });
            }
        },
        createData(){
            this.$refs['form'].validate(async valid => {
                if(!valid){
                    return false;
                }else{
                    const res = await deptApi.save(this.saveDept);
                    if(res.success){
                        this.$message({
                            type:'success',
                            message:'新增成功'
                        });
                        this.dialogFormVisible = false;
                        this.search();
                    }
                }
            })
        },
        updateData(){
            this.$refs['form'].validate(async valid => {
                if(!valid){
                    return false;
                }else{
                    const res = await deptApi.update(this.saveDept);
                    if(res.success){
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        });
                        this.dialogFormVisible = false;
                        this.search();
                    }
                }
            })
        },
        handleNodeClick(data){
            this.saveDept.pid = data.id;
            this.saveDept.parentName = data.deptName;
        },
        closeTree(){
            this.dialogTreeVisible = false;
            this.saveDept.pid=-1;
            this.saveDept.parentName="";
        },
        handleTreeConfirm(){
            this.dialogTreeVisible = false;
            this.$refs.form.clearValidate("parentName");
        },
        selectDept(){
            this.dialogTreeVisible = true;
            // 将树形结构从接口端查询的数据赋值给treeData
            deptApi.selectTree().then(res => {
                if(res.success){
                    this.treeData = res.data;
                }
            })
        },


    },
}
</script>

<style></style>